<template>
  <view :class="['share-container', `theme-${currentTheme}`]">
    <view class="share-card">
      <view class="share-icon">
        <text class="iconfont icon-check"></text>
      </view>
      <view class="share-title">备份文件已准备好</view>
      <view class="share-desc">点击下方按钮分享或保存备份文件</view>
      <view class="file-info">
        <text class="file-name">文件名：{{ fileName }}</text>
        <text class="file-time">备份时间：{{ formatTime }}</text>
      </view>
      
      <!-- 所有按钮都显示，但会根据环境执行不同操作 -->
      <button class="share-btn primary" @tap="handleShare">发送给好友</button>
      <button class="share-btn" @tap="goBack">返回</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { onLoad, onShareAppMessage } from '@dcloudio/uni-app';
import { useThemeStore } from '@/store/modules/theme';
import useThemeMixin from '@/mixins/themeMixin';

const themeStore = useThemeStore();
const currentTheme = computed(() => themeStore.currentTheme);

// 使用主题mixin
useThemeMixin();

const filePath = ref('');
const fileName = ref('');
const formatTime = computed(() => {
  return new Date().toLocaleString();
});

// 分享消息配置
// #ifdef MP-WEIXIN
onShareAppMessage(() => {
  console.log('【分享页面】执行分享配置');
  return {
    title: '宴禧录备份文件',
    path: '/pages/index/index',
    imageUrl: '/static/logo.png'
  };
});
// #endif

// 页面加载时获取路径参数
onLoad((options: Record<string, string> = {}) => {
  console.log('【分享页面】收到参数:', options);
  
  if (options && options.path) {
    filePath.value = decodeURIComponent(options.path);
    console.log('【分享页面】解码后文件路径:', filePath.value);
  }
  if (options && options.name) {
    fileName.value = decodeURIComponent(options.name);
    console.log('【分享页面】解码后文件名:', fileName.value);
  }
  
  // 验证文件是否存在
  validateFile();
});

// 验证文件是否存在
const validateFile = () => {
  if (!filePath.value) return;
  
  // #ifdef MP-WEIXIN
  try {
    const fs = uni.getFileSystemManager();
    fs.access({
      path: filePath.value,
      success: () => {
        console.log('【分享页面】文件存在，可以分享');
      },
      fail: (err) => {
        console.error('【分享页面】文件不存在:', err);
        uni.showToast({
          title: '备份文件不存在',
          icon: 'none'
        });
      }
    });
  } catch (error) {
    console.error('【分享页面】验证文件错误:', error);
  }
  // #endif
};

// 处理分享操作
const handleShare = () => {
  if (!filePath.value) {
    uni.showToast({
      title: '文件路径无效',
      icon: 'none'
    });
    return;
  }
  
  console.log('【分享页面】开始分享文件:', filePath.value);
  
  // #ifdef MP-WEIXIN
  try {
    // 直接使用微信API分享文件
    // @ts-ignore
    wx.shareFileMessage({
      filePath: filePath.value,
      success: () => {
        console.log('【分享页面】分享成功');
        uni.showToast({
          title: '分享成功',
          icon: 'success'
        });
        markBackupSuccess();
        setTimeout(() => {
          goBack();
        }, 1500);
      },
      fail: (err: any) => {
        console.error('【分享页面】分享失败:', err);
        // 使用备用方案
        handleShareAlternative();
      }
    });
  } catch (error) {
    console.error('【分享页面】分享API调用出错:', error);
    handleShareAlternative();
  }
  // #endif
  
  // #ifndef MP-WEIXIN
  uni.showModal({
    title: '提示',
    content: '当前平台不支持文件分享功能，请在微信小程序中使用此功能',
    showCancel: false
  });
  // #endif
};

// 备用分享方法
const handleShareAlternative = () => {
  uni.showModal({
    title: '分享提示',
    content: '当前环境不支持直接分享文件，请尝试重新备份后分享',
    confirmText: '返回',
    success: (res) => {
      if (res.confirm) {
        goBack();
      }
    }
  });
};

// 标记备份成功
const markBackupSuccess = () => {
  // 更新最后备份时间
  const app = getApp();
  if (app) {
    app.globalData = app.globalData || {};
    app.globalData.backupSuccess = true;
  }
  
  // 将成功状态存入本地存储，防止全局变量丢失
  try {
    uni.setStorageSync('backup_success', 'true');
    uni.setStorageSync('backup_timestamp', new Date().toISOString());
  } catch (e) {
    console.error('【分享页面】保存备份状态失败:', e);
  }
};

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};
</script>

<style lang="scss">
.share-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--background-color);
  padding: 30rpx;
}

.share-card {
  background-color: #fff;
  border-radius: 20rpx;
  width: 100%;
  padding: 40rpx 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.share-icon {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  background-color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30rpx;
  
  .iconfont {
    font-size: 60rpx;
    color: #fff !important;
  }
}

.share-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.share-desc {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 40rpx;
  text-align: center;
}

.file-info {
  width: 100%;
  padding: 20rpx;
  background-color: #f8f8f8;
  border-radius: 10rpx;
  margin-bottom: 40rpx;
  
  .file-name, .file-time {
    display: block;
    font-size: 26rpx;
    color: #666;
    margin-bottom: 10rpx;
    word-break: break-all;
  }
}

.share-btn {
  width: 100%;
  height: 90rpx;
  border-radius: 45rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  margin-bottom: 20rpx;
  background-color: var(--primary-color);
  color: #fff !important;
  
  &:active {
    opacity: 0.8;
  }
}

/* 主题样式 */
.theme-wedding {
  .share-icon {
    background-color: #ff6b6b;
  }
  
  .share-btn.primary {
    background-color: #ff6b6b;
  }
  
  .share-btn {
    &:not(.primary) {
      border: 1px solid #ff6b6b;
      color: #ff6b6b !important;
      background-color: transparent;
    }
  }
}

.theme-funeral {
  .share-icon {
    background-color: #2c3e50;
  }
  
  .share-btn.primary {
    background-color: #2c3e50;
  }
  
  .share-btn {
    &:not(.primary) {
      border: 1px solid #2c3e50;
      color: #2c3e50 !important;
      background-color: transparent;
    }
  }
}

.theme-birthday {
  .share-icon {
    background-color: #ff6b6b;
  }
  
  .share-btn.primary {
    background-color: #ff6b6b;
  }
  
  .share-btn {
    &:not(.primary) {
      border: 1px solid #ff6b6b;
      color: #ff6b6b !important;
      background-color: transparent;
    }
  }
}

.theme-graduation {
  .share-icon {
    background-color: #1890FF;
  }
  
  .share-btn.primary {
    background-color: #1890FF;
  }
  
  .share-btn {
    &:not(.primary) {
      border: 1px solid #1890FF;
      color: #1890FF !important;
      background-color: transparent;
    }
  }
}

.theme-business {
  .share-icon {
    background-color: #722ED1;
  }
  
  .share-btn.primary {
    background-color: #722ED1;
  }
  
  .share-btn {
    &:not(.primary) {
      border: 1px solid #722ED1;
      color: #722ED1 !important;
      background-color: transparent;
    }
  }
}

.theme-housewarming {
  .share-icon {
    background-color: #52C41A;
  }
  
  .share-btn.primary {
    background-color: #52C41A;
  }
  
  .share-btn {
    &:not(.primary) {
      border: 1px solid #52C41A;
      color: #52C41A !important;
      background-color: transparent;
    }
  }
}

.theme-fullmoon {
  .share-icon {
    background-color: #F29C1F;
  }
  
  .share-btn.primary {
    background-color: #F29C1F;
  }
  
  .share-btn {
    &:not(.primary) {
      border: 1px solid #F29C1F;
      color: #F29C1F !important;
      background-color: transparent;
    }
  }
}

.theme-other {
  .share-icon {
    background-color: #909399;
  }
  
  .share-btn.primary {
    background-color: #909399;
  }
  
  .share-btn {
    &:not(.primary) {
      border: 1px solid #909399;
      color: #909399 !important;
      background-color: transparent;
    }
  }
}
</style> 